<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<style type="text/css">
input,button,select,textarea{outline:none}
ol,ul,li{list-style:none;margin:0;padding:0;}
.body{width:1100px;margin:0 auto;overflow: hidden;}
.sb{position: fixed;top:30%;left:30%; width: 250px;height: 150px;background: #ccc;padding:80px;}
.sb-zt{float:left; width: 10px;height: 10px;margin:9px 10px 0 0;border:1px solid #666;}
.zt1{background:#0F0;}.zt2{background:#FC0;}.zt3{background:#f00;}.zt4{background:#fff;}
.sbsele{height: 2em;line-height: 2em;cursor: pointer;}
.sbul{background:#fff;overflow: hidden;width:100px;display:none;}
.sbul li{height: 2em;line-height: 2em;padding-left: 1em;cursor: pointer;}
.sbul li:hover{background:#3af;color:#fff;}
</style>
<div class="body">
<div class="sb" id="sb">
    <div class="sbsele" id="sbsele"><div class="sbtxt" id="sbtxt"><div class="sb-zt zt1" id="sbzt"></div>在线</div></div>
    <UL class="sbul" id="sbul">
      <li id="zt1"><div class="sb-zt zt1"></div>在线</li>
      <li id="zt2"><div class="sb-zt zt2"></div>隐身</li>
      <li id="zt3"><div class="sb-zt zt3"></div>忙碌</li>
      <li id="zt4"><div class="sb-zt zt4"></div>离开</li>
    </ul>
</div>
</div>
  <script type="text/javascript">

window.onload=function(){
  sb.onmousedown=FDown;
  // 切换状态
   var sbsele=document.getElementById('sbsele'),
       sbul=document.getElementById('sbul'),
       lis=sbul.getElementsByTagName('li'),
       sbtxt=document.getElementById('sbtxt'),
       sbzt=document.getElementById('sbzt');

       sbsele.onclick = function(e) {
        e = e || window.event;
        if(e.stopPropagation){
          e.stopPropagation();
        }else{
          e.cancelBubble=true;
        }
        //阻止事件冒泡
        sbul.style.display='block';
       }
       for (var i = 0; i < lis.length; i++) {
         lis[i].onclick = function(){
         var id = this.id;
          sbul.style.display='none';
          sbtxt.innerHTML= this.innerHTML;
          sbzt.className ="";
          sbzt.className = "sb-zt "+id;
         }
       }
       document.onclick = function(){
         sbul.style.display='none';
         }
}
    function FDown(event){
        event = event;
        var sb = document.getElementById('sb'),
        // 光标按下时光标和面板之间的距离
        disX= event.clientX-sb.offsetLeft,
        disY= event.clientY-sb.offsetTop;
        //移动
        document.onmousemove = function(event) {
          //FMove(event,disX,disY);
          //面板和窗口的距离
          var l=event.clientX-disX,
              t=event.clientY-disY,
              winW=document.documentElement.clientWidth || document.body.clientWidth,
              winH=document.documentElement.clientHeight || document.body.clientHeight,
              //可移动距离
              maxW=winW-sb.offsetWidth,
              maxH=winH-sb.offsetHeight;
              if (l<0) {l=0;}else if(l>winW){l=winW;}
              if (t<0) {t=0;}else if(t>winH){t=winH;}
              sb.style.left=l+'px';
              sb.style.top=t+'px';
        }
        //释放鼠标
        document.onmouseup = function(event) {
          document.onmousemove = null;
        }

    }



function FMove(e,posX,posY) {
  var l=e.clientX-posX,
      t=e.clientY-posY;
      sb.style.left=l+'px';
      sb.style.top=t+'px';
}


  </script>



</body>
</html>